<script lang="ts" setup>
import { ref } from 'vue';
import { useLocale } from '@/locale/locale';

const props = withDefaults(
  defineProps<{
    cancelRate: {
      name: string;
      mode: string;
      startDays: number;
      endDays: number;
      rate: number;
      date: string;
      selected: boolean;
    }[];
  }>(),
  {
    cancelRate: () => []
  }
);

const { t } = useLocale();
const popupRef = ref();
const current = ref(0);
const steps = ref([
  {
    title: t('LOKey_cancelFree'),
    desc: t('LOKey_cancelFreeBefore')
  },
  {
    title: t('LOKey_cancelPartPay'),
    desc: t('LOKey_cancelPartPayBefore')
  },
  {
    title: t('LOKey_cancelAllPay'),
    desc: t('LOKey_cancelAllPayBefore')
  }
]);

defineExpose({
  open() {
    props.cancelRate.forEach((item: any, index: number) => {
      steps.value[index].title = item.name;
      steps.value[index].desc = steps.value[index].desc.replace('{0}', item.date);
      if (item.selected) {
        current.value = index;
      }
    });
    popupRef.value.open();
  }
});
</script>

<template>
  <apt-popup ref="popupRef" :show-confirm-btn="false" :title="t('DiningCancellationPolicy')">
    <uni-steps
      :active="current"
      :options="steps"
      active-color="#269c74"
      direction="column"
    ></uni-steps>
    <view class="text-sm" style="padding-left: 30px; color: #ff5500">
      {{ t('NoCancellationsAllowedAfterCheckIn') }}
    </view>
  </apt-popup>
</template>
